<template>
    <div>
        <p @click="count++">count:{{ count }}</p>
        <!-- 使用计算属性 -->
        <p>{{ countCom }}</p>

        <!--  -->
        <p>
            <input type="text" name="" id="" v-model="userinfo.username">
        </p>

        <!-- 使用计算属性userinfo -->
        <p>计算属性userinfoCom:{{ userinfoCom.username }}--{{ userinfoCom.age }}</p>
    </div>
</template>

<script>
// watch 和computed 区别
// 共同点: 都能监听

// watch和computed 的区别?

// 01: 计算属性必须有返回值,watch 没有返回值
// 02: 计算属性初始化默认监听执行, 而watch 不能初始化执行, 需要配置immediate:true
// 03: 计算属性可以实现对对象的监听, watch 默认不能监听对象,需要配置 deep:true
// 04: 计算属性有缓存. watch没有缓存
// 05: 计算属性一般用来执行轻量级的操作, 目的是衍生出一个新的值, 不能在计算属性中进行异步或开销大的操作
// 而 watch 可以用来监听执行异步开销比较大的操作

export default {
    data() {
        return {
            count: 100,
            userinfo: {
                username: '李世龙',
                age: 20
            }
        }
    },
    computed: {
        countCom() {
            // console.log('计算属性监听', this.count);
            return 100
        },
        userinfoCom() {
            console.log('计算属性监听userinfo');
            // 只要修改this.userinfo.username 该计算属性重新执行
            console.log(this.userinfo.username);
            // 只要修改this.userinfo.age 该计算属性重新执行
            console.log(this.userinfo.age);
            return this.userinfo

        }
    },
    watch: {
        count(newvalue) {
            // console.log('watch监听器', newvalue);
        }
    }
}
</script>
<style scoped></style>